<template>
  <q-page class="cc-member row">

    <div class="col bg-white shadow-2 q-pa-md q-ma-sm">
      <q-table
        flat
        color="primary"
        class="cross_table"
        separator="cell"
        :columns="columns"
        :data="list"
        row-key="id"
        :pagination.sync="pagination"
        :visible-columns="group"
        @request="query"
        :rows-per-page-options="[10,20,50,100]"
        :loading="loading"
        selection="multiple"
        :selected.sync="selected"
      >
        <template v-slot:top="table">
          <div class="row no-wrap full-width">
            <div class="q-pa">
              <q-select filled v-model="status_model" :options="options" @input="onValueChange" />
            </div>
            <!--<div class="q-pa">
              <q-select filled v-model="group_model" :options="groupOptions" :options-dense="true"  @input="onGroupValueChange">
                <template v-slot:prepend>
                  <q-icon name="place" @click.stop.prevent />
                </template>
              </q-select>
            </div>-->
            <div class="q-pa">
              <q-input clearable outlined placeholder="请输入uid" @input="query" v-model="recommend_id">
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <div class="q-pa">
              <q-input clearable outlined placeholder="请输入用户名搜索"  @input="query" v-model="username" >
                <template v-slot:prepend>
                  <q-icon name="mdi-account" @click.stop.prevent />
                </template>
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <div class="q-pa">
              <q-input clearable outlined placeholder="请输入手机号搜索" @input="query"  v-model="mobile" >
                <template v-slot:prepend>
                  <q-icon name="phone" @click.stop.prevent />
                </template>
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <q-space />
            <div class="q-gutter-xs">
              <q-btn icon="mdi-restore" no-wrap color="primary" label="刷新" @click="refresh" />
            </div>
          </div>
        </template>
        <template #body-cell-status="props">
          <q-td key="status" :props="props">
            <div v-if="props.row.status == 1">未认证</div>
            <div v-if="props.row.status == 0">未定义</div>
            <div v-if="props.row.status == 3">已认证</div>
          </q-td>
        </template>
        <template #body-cell-opt="props">
          <q-td :props="props" :auto-width="true">
            <q-btn  dense color="primary" outline style="width:100px;"   @click="link(props.row)">用户粉丝</q-btn>
          </q-td>
        </template>
        <template #body-cell-opt2="props">
          <q-td :props="props" :auto-width="true">
            <q-btn  dense color="primary" outline style="width:100px;"  @click="userstockadd(props.row)"> 发放股权 </q-btn>
            <q-btn  dense color="primary" outline style="width:100px;"  @click="stock_link(props.row)">股权信息</q-btn>
            <!--<q-btn  dense color="primary"  @click="openDialogStocklog(props.row)">股权</q-btn>-->
          </q-td>
        </template>
        <template #body-cell-detail="props">
          <q-td :props="props" :auto-width="true">
            <q-btn  dense color="primary" outline style="width:100px;"  @click="detail_link(props.row)">详情</q-btn>
          </q-td>
        </template>
      </q-table>
      <q-item-section><div style="padding: 20px;">总人数：{{pagination.rowsNumber}}</div></q-item-section>
    </div>

     <!-- 股权日志列表   -->
     <q-dialog maximized flat persistent ref="dialog_stocklog">
      <q-form  class="dialog_card column">
      <div class="addCompanyDialog dialog_card column">
        <h5 class="view_title justify-between q-px-md">
         股权日志列表
          <q-btn dense outline round icon="clear" size="sm" v-close-popup />
        </h5>

        <q-scroll-area class="col q-pa-sm">
          <q-table
            flat
            row-key="id"
            color="primary"
            class="cross_table"
            separator="cell"
            :columns="stockcolumns"
            :data="stocklist"
            :pagination.sync="stockPagination"
            :rows-per-page-options="[10, 20, 50, 100]"
            :loading="loading"
            selection="multiple"
            :selected.sync="selected"
            @request="query"
          >
           <template #body-cell-type="props">
            <q-td key="type" :props="props">
              <q-item v-if="props.row.event==1">余额变化</q-item>
              <q-item v-if="props.row.event==2">冻结余额变化</q-item>
              <q-item v-if="props.row.event==3">通证变化</q-item>
              <q-item v-if="props.row.event==4">冻结通证</q-item>
            </q-td>
          </template>
          <template #body-cell-event="props">
            <q-td key="event" :props="props">
              <q-item v-if="props.row.event==1">充值到预存款</q-item>
              <q-item v-if="props.row.event==2">从预存款提现</q-item>
              <q-item v-if="props.row.event==3">从预存款支付</q-item>
              <q-item v-if="props.row.event==4">退款到预存款</q-item>
              <q-item v-if="props.row.event==5">佣金提现到预存款</q-item>
              <q-item v-if="props.row.event==6">充值奖励</q-item>
            </q-td>
          </template>

          </q-table>
        </q-scroll-area>
        <div class="row justify-center q-pa-md">
          <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
        </div>

      </div>
      </q-form>
    </q-dialog>
    <!-- 股权日志列表 -end-  -->
    <!-- 弹出用户发放股权  -start-  -->
    <q-dialog  ref="userstockadd_dialog" :full-height="false">
      <q-layout view="Lhh lpR fff" container class="bg-white" style="height:500px;">
        <q-header class="bg-primary">
          <q-toolbar>
            <q-toolbar-title>发放股权</q-toolbar-title>
            <q-btn flat v-close-popup round dense icon="close" />
          </q-toolbar>
        </q-header>
        <q-form @submit="userstockSubmit"  @reset="onReset" >
          <!--<h5 class="view_title justify-between q-px-md">
             发放股权
             <q-btn outline round icon="clear" size="sm" v-close-popup />
           </h5>-->
          <q-card style="width: 560px;height:500px;padding-top: 60px;">
            <div class="row q-col-gutter-x-md dialog_form q-pa-md">
              <q-input dense disable v-model="frmstock.uid" type="text" readonly >
                <template v-slot:before>
                  <div style="width:90px;font-size: 14px;padding-right: 10px;">用户UID:</div>
                </template>
              </q-input>
            </div>

            <div class="row q-col-gutter-x-md dialog_form q-pa-md">
              <q-input dense disable v-model="frmstock.true_name" type="text" readonly >
                <template v-slot:before>
                  <div style="width:90px;font-size: 14px;padding-right: 10px;">实名:</div>
                </template>
              </q-input>
            </div>

            <div class="row q-col-gutter-x-md dialog_form q-pa-md">
              <q-input dense   v-model="frmstock.amount" type="text"   :rules="[requiredTest]" >
                <template v-slot:before>
                  <div style="width:120px;font-size: 14px;color:red;">股权金额(必填):</div>
                </template>
              </q-input>
            </div>

            <div class="row q-col-gutter-x-md dialog_form q-pa-md">
              <div class="col-md-3 text-center">
                <q-btn class="no-border-radius" unelevated type="submit" :loading="loading" icon="mdi-check-bold"
                       color="primary" label="保 存" size="md">
                  <template v-slot:loading>
                    <q-spinner-hourglass class="on-left" />保存...
                  </template>
                </q-btn>
              </div>

              <div class="col-md-3 text-center">
                <q-btn v-close-popup type="button" outline style="color: goldenrod"
                       icon="mdi-close-outline" label="关闭" size="md"></q-btn>
              </div>
            </div>
          </q-card>
        </q-form>
      </q-layout>

    </q-dialog>
  </q-page>
</template>
<!-- 服务商列表  -->
<script>
import { IndexMixin } from 'boot/mixins';
import confirm from 'components/confirm';
import { requiredTest } from 'boot/inputTest';
import { date } from 'quasar';
const today = new Date()
const { addToDate, subtractFromDate } = date
export default {
  name: 'memberList',
  mixins: [IndexMixin],
  components: {
    confirm,
  },
  props:['status'],
  data() {
    return {
      layout: false,
      drawer: false,
      drawerR: false,
      moreContent: true,
      contentSize: 150,
      columns: [
          { name: "user_id", align: "center", label: "用户ID", field: "user_id" },
          { name: "true_name", align: "center", label: "用户姓名", field: "true_name" },
          { name: "mobile", align: "center", label: "电话", field: "mobile" },
          //{ name: "point", align: "center", label: "积分数", field: "point" },
          { name: "status", align: "center", label: "状态", field: "status" },
          // { name: "balance", align: "center", label: "用户余额", field: "balance", },
          // { name: "balance_freeze",  align: "center", label: "冻结的用户余额", field: "balance_freeze", },
          // { name: "commission", align: "center", label: "佣金", field: "commission", },
          // { name: "commission_wait", align: "center", label: "冻结佣金", field: "commission_wait", },
          { name: "opt",  align: "center", label: "粉丝列表"},
          { name: "opt2", align: "center", label: "股权列表"},
          { name: "detail", align: "center", label: "会员详情"  }
        ],
      loading: true,
      showQuery: true,
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      uploadUrl: `${process.env.BASE_URL}/sys/common/upload`,
      imgUrl: `${process.env.BASE_URL}/sys/common/static`,
      url: {
        list: '/userlist'
      },
      form: {
        id : '',
        member_name : '',
        password : '',
        description : '',
        content : '',
        email : true,
        top : false,
        sort : 100,
      },
      file_list: [],
      isEdit: 0,
      linkDialog:false,
      selectedUserRow:null,
      fanslist:[],
      fansPagination:{
          page: 1,
          rowsPerPage: 10,
          descending: false,
          rowsNumber: 0
        },
      stockcolumns:[
        { name: "sourceId", align: "center", label: "源ID号", field: "sourceId", },
        { name: "userId", align: "center", label: "用户id", field: "userId", },
        { name: "type", align: "center", label: "类型", field: "type", },
        { name: "event", align: "center", label: "操作类型", field: "event", },
        { name: "amount", align: "center", label: "当前金额", field: "amount", },
        { name: "amountLog", align: "center", label: "变化之前的金额", field: "amountLog", },
        { name: "note", align: "center", label: "备注", field: "note", }
      ],
      stocklist:[],
      stockPagination:{
          page: 1,
          rowsPerPage: 10,
          descending: false,
          rowsNumber: 0
      },
      recommend_id: '',
      group_id: 1,
      group_model: { label: "服务商" , value: 1},
      // status: '',
      status_model: { label: "全部" , value: -1},
      options: [
        { label: "全部服务商" , value: -1},
        { label: "已认证服务商" , value: 3},
        { label: "待认证服务商" , value: 1},
      ],
      groupOptions: [
        { label: "普通用户" , value: 0},
        { label: "服务商" , value: 1}
      ],
      userstockadd_dialog: false,
      frmstock: {
        uid: 0,
        amount: '',
        true_name: "",
      },
    };
  },
  methods: {
    requiredTest,
    detail_link(row){
      this.$router.push({
        path: '/memberserver/detail',
        query: { id: row.user_id, name: this.username }
      })
    },
    getTypeLabel( b ){
      console.log(b)
      if(b == 0){
        return '隐藏'
      }else{
        return '显示'
      }
    },
    queryParam() {
      //组合查询参数
      // console.log(this.username)
      if (this.mobile != '') {
        this.searchForm.mobile = this.mobile;
      }else if(this.username != ''){
        this.searchForm.name = this.username;
      }else{
        const name = this.$route.query.name ?this.$route.query.name : ''
        if(name !== ''){
          this.searchForm.name = name;
        }else{
          delete this.searchForm.name
          delete this.searchForm.mobile
        }
      }
      if(this.recommend_id && this.recommend_id.length > 0){
        this.searchForm.uid = this.recommend_id
      }else{
        delete this.searchForm.uid
      }
      // this.searchForm.status = 3
      if(this.group_id >= 0){
        this.searchForm.group_id = this.group_id
      }else{
        delete this.searchForm.group_id
      }
      if(this.status_model.value == -1){
        delete this.searchForm.status
      }
      // this.searchForm.group_id = 1
    },
    checkPhoneNumber(phoneNumber) {
        // 定义一个正则表达式，匹配以1开头，后面跟10位数字的字符串
        var reg = /^1\d{10}$/;
        return reg.test(phoneNumber);
      },
    initDict() {
      const name = this.$route.query.name ?this.$route.query.name : ''
      this.username = name
      // const user = (this.$store.state.User)
      //const search = JSON.parse((JSON.parse(user.search)))
      // if(search && search.name){
      //   this.username = search.name
      // }
    },
    userstockadd(row) {
      this.frmstock.uid = row.user_id;
      this.frmstock.true_name = row.true_name;
      this.$refs.userstockadd_dialog.show();
    },
    userstockSubmit() {
      this.frmstock.amount = parseInt(this.frmstock.amount)
      this.$axios.post("/stockadd", this.frmstock).then((r) => {
        if (r.code == 0) {
          this.file_list = [];
          this.$q.notify({
            position: "top",
            color: "info",
            textColor: "white",
            icon: "cloud_done",
            group: false,
            html: true,
            message: "保存成功！！",
          });
          this.refresh();
          this.onReset();
          this.$refs.userstockadd_dialog.hide();
        } else {
          this.$q.notify({
            position: "top",
            color: "info",
            textColor: "white",
            icon: "cloud_done",
            group: false,
            html: true,
            message: "保存成功！！" + r.code,
          });
        }
      });
    },
    onSubmit (evt) {
      console.log( this.form  )
      if( this.isEdit ){
        //this.form.attachments = this.file_list
      }
      let url = ''
      if(this.isEdit == 1){
        url = this.url.edit
      }else{
        url = this.url.add
      }
      this.$axios.post(url, this.form).then((r) => {
        this.babyWord = r;
        if(r.code == 0){
          this.file_list = []
          this.$q.notify({ position: 'top', color: 'info', textColor: 'white', icon: 'cloud_done', group: false, html: true, message: '保存成功！！',});
          this.refresh()
          this.onReset()
          this.$refs.dialog.hide();
        }else{
          this.$q.notify({ position: 'top', color: 'info', textColor: 'white', icon: 'cloud_done', group: false, html: true, message: '保存成功！！'+ r.code,});

        }
      });
      //evt.target.submit()
    },
    onReset(){
      console.log('reset')
      this.form = {
        id : 0,
        member_name : '',
        password : '',
        email : true,
      }
    },
    openDialogStocklog(row) {
        const url = "/stockloglist";
        this.$axios.post(url, { uid: row.user_id }).then((r) => {

          if (r.code == 0) {
            this.stocklist = r.data ;

            this.$refs.dialog_stocklog.show();
          } else {
            this.$q.notify({ position: 'top', color: 'error', textColor: 'red', icon: 'cloud_done', group: false, html: true, message: '操作失败！！', });
          }
        });

      },
    refresh(){
      // localStorage.setItem('searchform', this.name);
      // const aa = localStorage.getItem('searchform');

      this.query()
      // console.log(this.pagination)
      // this.$axios.post('/userlist',{"status":"1","key":"","page":this.pagination.page,"limit":this.pagination.rowsPerPage }).then((r) => {
      //   this.list = r.data;
      // });
    },
    onValueChange(val) {
      this.status_model = val;
      this.searchForm.status = this.status_model.value;
      this.query();
    },
    onGroupValueChange(val) {
      this.group_model = val;
      this.group_id = this.group_model.value

      this.query();
    },
    link(row,page=1) {
      this.$router.push({
        path: '/fans/list',
        query: { id: row.user_id}
      })
    },
    stock_link(row,page=1) {
      this.$router.push({
        path: '/stock/list',
        query: { id: row.user_id}
      })
    },
      fansQuery(pagination) {

        this.fansPagination = pagination;
        this.fansPostList(this.selectedUserRow.user_id,pagination.pagination.page)
      },
      fansPostList(uid,page=1) {
        this.$axios.post('/fanslist', {
          uid: uid,
          //uid: 66801,
          limit: 10,
          page:page
        }).then((res) => {
          if (res.code != 0) {
            this.$info(res.message);
            return false;
          }
          if (res.data) {
            this.fanslist = res.data;
            this.linkDialog = true;
            this.fansPagination.rowsNumber = res.count;
          }
        });
      },
  },

  created() {
    this.initDict();
  },
};
</script>

<style lang="stylus"></style>
